<script lang="ts" setup>
import { CloseBtn } from '~comp/card';
import MobileMenu from './MobileMenu.vue';

defineProps<{
  onSignIn?: () => void;
  onSignUp?: () => void;
  onScrollTo: (id: string) => void;
}>();

const bp = useAppBreakpoints();
const visible = ref(false);

const menuItems = reactive([
  { name: 'About Us', scrollTo: 'about' },
  { name: 'Commissions', scrollTo: 'commissions' },
  { name: 'Testimonials', scrollTo: 'testimonials' },
  { name: 'FAQ', scrollTo: 'faq' },
]);
</script>

<template>
  <div class="absolute left-0 right-0 top-0 z-2 pt-5">
    <div class="relative m-[0_auto] max-w-347 w-full flex items-center justify-between px-6">
      <nav v-if="bp.tabletl" class="flex items-center">
        <a
          v-for="item in menuItems"
          :key="item.name"
          class="header-links-item"
          @click="onScrollTo(item.scrollTo)"
        >
          {{ item.name }}
        </a>
      </nav>
      <div class="flex-1 text-center" title="G9 Affiliate">
        <img src="../imgs/logo-home.png" class="max-w-60 w-full">
      </div>
      <div v-if="bp.tabletl" class="ml-auto">
        <AButton class="ant-cover__Button-3d-yellow !h-10 !w-21" type="primary" @click="onSignIn">
          Log in
        </AButton>
        <AButton class="ant-cover__Button-3d-primary ml-2.5 !h-10 !w-37.5" type="primary" @click="onSignUp">
          Become a partner
        </AButton>
      </div>

      <APopover
        v-model:open="visible"
        overlayClassName="ant-cover__Popover-menu"
        placement="bottomRight" :arrow="false" trigger="click"
        transitionName="none"
      >
        <i v-if="bp.ltTabletl" class="i-ic:round-menu absolute right-4 text-6" />
        <template #content>
          <CloseBtn class="right-7.5 top-2.5 ml-auto !absolute" @click="visible = false" />
          <MobileMenu
            :menuItems="menuItems"
            @signIn="onSignIn"
            @signUp="onSignUp"
            @close="visible = false"
            @scroll="onScrollTo"
          />
        </template>
      </APopover>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-links-item {
  --uno: 'text-sys-text-head items-center cursor-pointer flex text-4 relative whitespace-nowrap ';
  text-indent: 0;
  transition: color 0.1s ease-in-out;
  &:not(:last-child) {
    margin-right: 15px;
  }
}
</style>

<style lang="scss">
.ant-popover.ant-cover__Popover-menu {
  padding-top: 14px;
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  padding: 0;
  width: 100vw;
  height: var(--dfvh);

  .ant-popover-content,
  .ant-popover-inner {
    height: 100%;
    width: 100%;
    border-radius: 0;
    overflow: auto;
    --uno: 'flex-center';
  }
}
</style>
